<script setup lang="ts">
import { ref } from 'vue';

// 第一种传参方式
// 导入路由对象
import { useRoute } from 'vue-router';
// 使用路由对象
const route = useRoute();
// 定义路由参数
const title = ref('')
// console.log("route", route.query);
// // 将路由内参数传递给title
// title.value = route.query.query as string

// 动态路由传参方式
console.log("route", route.params);
title.value = route.params.words as string

const words = ref('')
words.value = route.query.words as string

// ------ 导入Pinia实例------
import { useCounterStore } from '@/stores/counter'
import { jokeStore } from '@/stores/joke'

const store  = useCounterStore()
const store1  = jokeStore()

</script>

<template>
  <div class="search">
    <p>搜索关键字: {{ $route.query.words }}</p>
    <p>搜索结果: {{ words }}</p>
    <ul>
      <!-- // 第二种传参方式 -->
      <li>我是动态路由传参方式$route.params{{ $route.params.words }}</li>
      <li>.............</li>
      <li>.............</li>
    </ul>

    <div class="hello">
      <p>这里是pinia中的数据：{{ store.count }}</p>
      <p>这里是pinia中的数据双倍值是：{{ store.doubleCount }}</p>
      <button @click="store.increment">点击增加</button>
    </div>

    <div class="hello">
      <h3>这里是个笑话</h3>
      <p>{{ store1.joke }}</p>
      <button @click="store1.refreshJoke">点击刷新</button>
    </div>
  </div>
</template>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>
